<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no, email=no">
		<meta name="HandheldFriendly" content="true">
		<title>图片懒加载和节流移动端</title>
		<link rel="stylesheet" type="text/css" href="../../css/comment.css" />
		<style type="text/css">
		body{background: #fff;}
			img,
			.image {
				opacity: 0;
			}
			.st-graphic{padding: 0;}
		</style>
	</head>

	<body>

		<div class="st-container">
			<div class="st-graphic">
				<ul class="st-row">
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image:;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image: ;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image:;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/bg.png">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image:;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/bg.png">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image:;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/bg.png">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image: ;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image:;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/bg.png">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image: ;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image:;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/bg.png">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image: ;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image: ;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image: ;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image: ;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image: ;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image: ;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image: ;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image: ;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image: ;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>

					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image: ;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image: ;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>
					<li class="st-col st-col-50">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="image" style="background-image: ;" data-src="../../img/1.JPEG"></span>
								<img src="" data-src="../../img/1.JPEG">
							</div>
							<div class="st-text">
								<h1>这是标题</h1>
								<p>这是文本</p>
							</div>
						</div>
					</li>

				</ul>
			</div>

		</div>

		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			window.onload = function() {

				var flag = true; //在一定时间之后才调用滚动函数
				let imgSrc = getRealImgSrc(); //获取图片真正的src

				//获得图片的真实地址
				function getRealImgSrc() {
					let imgSrcTemp = [];
					let img = document.getElementsByClassName("image"); //图片
					for(let i = 0, len = img.length; i < len; i++) {
						imgSrcTemp.push(img[i].getAttribute("data-src"));
					}
					return imgSrcTemp;
				}

				imgLazyLoad();

				//初始化
				function init() {
					let clientHeight = document.documentElement.clientHeight;
					let img = document.getElementsByClassName("image"); //图片
					for(let i = 0, len = img.length; i < len; i++) {
						if(img[i].offsetTop <= clientHeight) {
							img[i].style.backgroundImage = "url(" + imgSrc[i] + ")";
							img[i].style.opacity = 1;
						}
					}
				}

				//图片懒加载
				function imgLazyLoad() {
					let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
					let clientHeight = document.documentElement.clientHeight;
					let img = document.getElementsByClassName("image"); //图片
					for(let i = 0, len = img.length; i < len; i++) {
						if(img[i].offsetTop <= scrollTop + clientHeight - 50) {
							if(!img[i].getAttribute("url")) {
								img[i].style.backgroundImage = "url(" + imgSrc[i] + ")";
								img[i].style.paddingTop = "100%";
								img[i].style.transition = "opacity 3s";
								setTimeout(function() {
										img[i].style.opacity = 1;
									}, 200)
							}
						}
					}

				}

				init(); //初始化首屏的加载

				//滚动加载
				window.onscroll = function() {
					if(flag) {
						flag = false;
						imgLazyLoad();
					}
				}

				//滚动函数节流使用
				setInterval(function() {
					flag = true;
				}, 100);

			}
		</script>

	</body>

</html>

<!--<!DOCTYPE html>
<html>

<head>
	<title>图片懒加载和节流移动端</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script>
		! function() {   
			let fun = function() {   
				let width = document.documentElement.clientWidth;   
				document.getElementsByTagName("html")[0].style.fontSize = width / 7.5 + "px";   
			}     
			document.addEventListener("DOMContentLoaded", fun, false);   
		}();
	</script>
	<style type="text/css">
		html {
			font-size: 100px;
		}
		
		body {
			width: 7.5rem;
			overflow-x: hidden;
		}
		
		* {
			margin: 0;
			padding: 0;
		}
		
		.one {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		
		.container {
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;
			text-align: center;
			font-size: 36px;
		}
		
		img {
			border: none;
			outline: none;
			margin: 0;
			padding: 0;
			opacity: 0;
		}
		
		.container .item {
			text-align: center;
			display: inline-block;
			font-size: 0.32rem;
			margin-bottom: 0.1rem;
		}
		
		.container .item .tit-f {
			text-align: left;
			/*overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;*/
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			width: auto;
			min-width: 3.0rem;
			max-width: 3.3rem;
			margin: 0 auto;
		}
		
		.container .item .from {
			text-align: left;
			font-size: 0.20rem;
			margin: 0.1rem 0 0.1rem 0.07rem;
			display: inline-block;
			max-width: 1.85rem;
			vertical-align: middle;
		}
		
		.container .item .time {
			text-align: right;
			font-size: 0.20rem;
			margin: 0.1rem 0 0.1rem 0.07rem;
			display: inline-block;
			width: 1.4rem;
			vertical-align: middle;
		}
		
		.container .item .f-t-box {
			width: 100%;
			box-sizing: border-box;
			text-align: left;
		}
		
		.container img {
			height: 3.75rem;
			width: auto;
			min-width: 3.5rem;
			max-width: 3.75rem;
			display: inline-block;
			border: none;
			outline: none;
		}
		
		.imgFadeIn {
			transition: all 3s;
		}
	</style>
</head>

<body>

	<div class="container">

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
		<div class="item">
			<img src="" data-src="images/a7.jpg">
			<div class="tit-f">
				这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字   </div>
		
			<div class="f-t-box">
				<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
				<div class="time one">2017-10-24</div>
				</div>
			</div>

	
	</div>

	<script>
		window.onload = function() {

			var flag = true; //在一定时间之后才调用滚动函数
			let imgSrc = getRealImgSrc(); //获取图片真正的src

			//获得图片的真实地址
			function getRealImgSrc() {
				let imgSrcTemp = [];
				let img = document.getElementsByTagName("img"); //图片
				for(let i = 0, len = img.length; i < len; i++) {
					imgSrcTemp.push(img[i].getAttribute("data-src"));
				}
				return imgSrcTemp;
			}

			imgLazyLoad();

			//初始化
			function init() {
				let clientHeight = document.documentElement.clientHeight;
				let img = document.getElementsByTagName("img"); //图片
				for(let i = 0, len = img.length; i < len; i++) {
					if(img[i].offsetTop <= clientHeight) {
						img[i].setAttribute("src", imgSrc[i]);
						img[i].style.opacity = 1;
					}
				}
			}

			//图片懒加载
			function imgLazyLoad() {

				let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
				let clientHeight = document.documentElement.clientHeight;
				let img = document.getElementsByTagName("img"); //图片
				for(let i = 0, len = img.length; i < len; i++) {
					if(img[i].offsetTop <= scrollTop + clientHeight - 50) {
						if(!img[i].getAttribute("src")) {
							img[i].setAttribute("src", imgSrc[i]);
							img[i].onload = function() {
								this.className = "imgFadeIn";
								setTimeout(function() {
									this.style.opacity = 1;
								}.bind(this), 200)
							}
						}
					}
				}
			}

			//init();//初始化首屏的加载

			//滚动加载
			window.onscroll = function() {
				if(flag) {
					flag = false;
					imgLazyLoad();
				}
			}

			//滚动函数节流使用
			setInterval(function() {
				flag = true;
			}, 100);

		}
	</script>

</body>

</html>-->